<template>
  <div class="user-manage-container">
    <el-card>
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        @click="onToExcelClick"
      >
        导出Excel
      </el-button>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="#" type="index" />
        <el-table-column prop="username" label="姓名" width="120" />
        <el-table-column prop="mobile" label="联系方式" width="120" />

        <el-table-column label="头像" align="center">
          <template v-slot="{ row }">
            <el-image
              class="avatar"
              :src="row.avatar"
              :preview-src-list="[row.avatar]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="角色">
          <template #default="{ row }">
            <div v-if="row.role && row.role.length > 0">
              <el-tag
                v-for="item in row.role"
                :key="item.id"
                size="mini"
                type="success"
                >{{ item.title }}</el-tag
              >
            </div>
            <div v-else>
              <el-tag type="success" size="mini">角色</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开通时间" prop="openTime">
          <template #default="{ row }">
            {{ $filters.dateFilter(row.openTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="260">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="onTableClick('view', row)"
              >查看</el-button
            >
            <el-button
              type="info"
              size="mini"
              @click="onTableClick('role', row)"
              >角色</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="onTableClick('delete', row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </el-card>

    <Export2Excel v-model="exportToExcelVisible"></Export2Excel>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { userManageList } from '@/api/user'
import Export2Excel from './components/Export2Excel.vue'

const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(2)

const getUserManageList = async () => {
  const res = await userManageList()
  tableData.value = res.list
  total.value = res.total
}
getUserManageList()

// 表格分页
const handleSizeChange = (val: number) => console.log(val)
const handleCurrentChange = (val: number) => console.log(val)

// 表格操作
const onTableClick = (type: string, row: any) => {
  console.log(type, row)
}

// 导出功能
const exportToExcelVisible = ref(false)
// 导出
const onToExcelClick = () => (exportToExcelVisible.value = true)
</script>

<style lang="scss" scoped>
.user-manage-container {
  .header {
    margin-bottom: 22px;
    text-align: right;
  }
  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
